@import '/styles/mixins.less';
@import '/styles/variables.less';

.m-date-appointment {
  background-color: #fff;
  .date-wrapper {
    display: flex;
    width: 100%;
    overflow-x: auto;
    .date-item {
      .flex-column();
      position: relative;
      min-height: 80rpx;
      padding: 0 36rpx;
      &:first-child {
        padding-left: 24rpx;
      }
      &:last-child {
        padding-right: 24rpx;
      }
      &.active {
        &::after {
          position: absolute;
          bottom: 0rpx;
          width: 60rpx;
          height: 4rpx;
          background-color: #1677ff;
          border-radius: 2rpx;
          content: '';
        }
        .desc {
          color: @primary-color;
          font-weight: 500;
          &:last-child {
            font-weight: 500;
            color: @primary-color;
            font-size: 24rpx;
          }
        }
      }
      .desc {
        color: @text-dark;
        font-size: 30rpx;
        white-space: nowrap;
        font-weight: 500;
        &:last-child {
          font-weight: 400;
          color: @text-light;
          font-size: 24rpx;
          padding-top: 4rpx;
        }
      }
    }
  }
  .time-items {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    // padding: 0 24rpx;
    .time-item {
      .flex-column();
      flex-shrink: 0;
      min-width: 120rpx;
      width: 120rpx;
      padding: 0 12rpx;
      &:first-child {
        padding-left: 0
      }
    }
    .time-item-desc {
      .flex-column();
      box-sizing: border-box;
      width: 100%;
      height: 120rpx;
      text-align: center;
      background-color: #f5f5f5;
      border-radius: 8rpx;
      color: #333;
    }
    .active {
      font-size: 30rpx;
      color: @primary-color;
      font-weight: 500;
      background-color: #E7F1FF;
      border-radius: 12rpx;
      background-image: url();
      background-size: 40rpx;
      background-repeat: no-repeat;
      background-position: right bottom;

    }
    .passed {
      color: #999;
      background-color: #f5f5f5;
    }
    .title {
      font-size: 30rpx;
      font-weight: 500;
    }
    .desc {
      padding-bottom: 4rpx;
      font-size: 24rpx;
    }
    .passedDesc {
      // color: @text-light;
    }
    .activeDesc {
      color: @primary-color;
    }
  }
  .time-range {
    padding: 0 12rpx;
    .time-range-desc {
      .flex(center, flex-start);
      margin-top: 48rpx;
      // padding-left: 24rpx;
      margin-bottom: 26rpx;
      border-radius: 8rpx;
      color: @text-dark;
      font-weight: 500;
      font-size: 30rpx;
      .title {
        // padding-left: 26rpx;
      }
      .desc {
        padding-left: 16rpx;
      }
    }
  }
}
